<template>
  <div class="course-list-container">
    <FrontendHeader />
    
    <div class="container">
      <div class="page-header">
        <h1>全部课程</h1>
        <p>选择适合您的课程，开启学习之旅</p>
      </div>
      
      <!-- 顶部课程分类导航 -->
      <div class="category-nav">
        <el-tabs v-model="filterForm.courseType" @tab-change="typeChange" type="card">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane :label="type.name" :name="type.id" v-for="type in courseTypes" :key="type.id"></el-tab-pane>
        </el-tabs>
      </div>
      
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input v-model="searchKeyword" placeholder="搜索课程名称" :prefix-icon="Search">
          <template #append>
            <el-button @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
      </div>
      
      <!-- 课程列表 -->
      <div class="course-content" ref="courseContainer">
        <div class="course-grid">
          <el-row :gutter="20">
            <el-col :span="6" v-for="course in mockCourses" :key="course.id">
              <el-card shadow="hover" class="course-card">
                <img :src="course.image" :alt="course.name" class="course-image">
                <div class="course-info">
                  <div class="course-type">{{ getCourseTypeName(course.typeId) }}</div>
                  <h3>{{ course.name }}</h3>
                  <p class="course-desc">{{ course.description }}</p>
                  <div class="course-meta">
                    <span class="course-price">¥{{ course.price }}</span>
                    <span class="course-students">{{ course.students }}人学习</span>
                  </div>
                  <div class="course-actions">
                    <router-link :to="'/course/detail/' + course.id" class="view-detail">查看详情</router-link>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
          <div class="pagination-info">
            <span>共 {{ pagination.total }} 个课程</span>
          </div>
          <div class="pagination-controls">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[12, 24, 36, 48]"
              layout="prev, pager, next, jumper"
              :total="pagination.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              class="jd-pagination"
            ></el-pagination>
          </div>
          <div class="page-size-selector">
            <el-select v-model="pagination.pageSize" @change="handleSizeChange" size="small">
              <el-option :label="'12条/页'" :value="12"></el-option>
              <el-option :label="'24条/页'" :value="24"></el-option>
              <el-option :label="'36条/页'" :value="36"></el-option>
              <el-option :label="'48条/页'" :value="48"></el-option>
            </el-select>
          </div>
        </div>
        
        <!-- 学习提示 -->
        <div class="learning-tips">
          <h3 class="section-title">学习小贴士</h3>
          <div class="tips-container">
            <div class="tip-card">
              <div class="tip-icon">📚</div>
              <h4>制定学习计划</h4>
              <p>合理安排学习时间，制定每日学习目标，提高学习效率</p>
            </div>
            <div class="tip-card">
              <div class="tip-icon">💻</div>
              <h4>多动手实践</h4>
              <p>编程技能需要不断练习，完成课程作业并尝试自己的项目</p>
            </div>
            <div class="tip-card">
              <div class="tip-icon">👥</div>
              <h4>加入学习社区</h4>
              <p>与同学交流，分享学习经验，解决遇到的问题</p>
            </div>
            <div class="tip-card">
              <div class="tip-icon">🔄</div>
              <h4>定期复习</h4>
              <p>及时复习已学内容，巩固知识点，加深记忆</p>
            </div>
          </div>
        </div>

        <!-- 回到顶部按钮 -->
        <div 
          class="back-to-top" 
          :class="{ 'show': showBackToTop }"
          @click="scrollToTop"
        >
          <el-icon><ArrowUp /></el-icon>
        </div>
      </div>
    </div>
    
    <!-- 页脚 -->
    <FrontendFooter />
  </div>
</template>

<script setup>
import FrontendHeader from '../../components/FrontendHeader.vue'
import FrontendFooter from '../../components/FrontendFooter.vue'
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { Search, Document, ArrowUp } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {queryByStatus} from "@/api/CourseTypes.js";
import {coursesPageByUser} from "@/api/Course.js";
// 课程类型数据
const courseTypes = ref([])

// 筛选表单
const filterForm = reactive({
  courseType: ''
})

// 搜索关键词
const searchKeyword = ref('')
// 容器引用
const courseContainer = ref(null)
// 是否显示回到顶部按钮
const showBackToTop = ref(false)

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 12,
  total: 0
})


// 模拟课程数据 - 增加更多数据以展示分页效果
const mockCourses = ref([])

// 获取课程类型名称
const getCourseTypeName = (typeId) => {
  const type = courseTypes.value.find(t => t.id === typeId)
  return type ? type.name : '未知类型'
}
//发送请求获取可用的课程类型
const getCourseTypes=()=>{
  queryByStatus().then(res=>{
    courseTypes.value = res.data
  })
}

// 加载课程列表
const loadCourses = () => {
  // 这里应该调用API获取课程数据
  coursesPageByUser({
    name:searchKeyword.value,
    typeId:filterForm.courseType,
    curPage:pagination.currentPage,
    pageSize:pagination.pageSize
  }).then(res=>{
    mockCourses.value=res.data.dataList;
    pagination.currentPage = res.data.curPage
    pagination.pageSize = res.data.pageSize
    pagination.total = res.data.total
  })

  
  // 检查是否需要显示回到顶部按钮
  checkScrollPosition()
}
const typeChange=(typeId)=>{
  console.log(typeId)
  filterForm.courseType = typeId
  loadCourses()

}

// 监听滚动事件
const handleScroll = () => {
  checkScrollPosition()
}

// 检查滚动位置
const checkScrollPosition = () => {
  if (window.scrollY > 300) {
    showBackToTop.value = true
  } else {
    showBackToTop.value = false
  }
}

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
  showBackToTop.value = false
}



// 搜索课程
const handleSearch = () => {
  loadCourses()
}

// 页容量处理
const handleSizeChange = (size) => {
  pagination.pageSize = size
  loadCourses()
  
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

//当前页发生变化的处理
const handleCurrentChange = (current) => {
  pagination.currentPage = current
  loadCourses()
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 页面加载时获取数据
onMounted(() => {
  loadCourses()
  getCourseTypes()
  
  // 添加滚动事件监听
  window.addEventListener('scroll', handleScroll)
})

// 页面卸载时清理事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 学习提示相关数据已内置在模板中

// 暴露函数和变量
defineExpose({
  handleSearch
})
</script>

<style scoped>
.course-list-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  flex: 1;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 0;
  text-align: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 500;
}

.page-header p {
  font-size: 16px;
  opacity: 0.9;
}

/* 顶部课程分类导航样式 */
.category-nav {
  background-color: white;
  padding: 0;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-bottom: none;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0;
  padding: 12px 24px;
  transition: all 0.3s;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #667eea;
  color: #667eea;
  font-weight: 500;
}

.el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #ebeef5;
  margin: 0;
}

.course-content {
  flex: 1;
}

.search-box {
  background-color: white;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 使用Element Plus的栅格系统替代grid */
.course-grid {
  margin-bottom: 24px;
}

.course-card {
  height: auto;
  min-height: 380px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.course-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-info {
  padding: 16px;
}

.course-type {
  display: inline-block;
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.course-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
  height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 500;
}

.course-desc {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #606266;
  height: 44px;
  line-height: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.course-price {
  color: #f56c6c;
  font-weight: bold;
}

.course-students {
  color: #909399;
  font-size: 12px;
}

.course-actions {
  text-align: center;
}

.view-detail {
  display: inline-block;
  background-color: #667eea;
  color: white;
  padding: 6px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
  font-size: 14px;
}

.view-detail:hover {
  background-color: #5a6fd8;
}

/* 京东风格分页样式 */
.pagination {
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 确保分页组件正常显示 */
.pagination-controls {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* 京东风格分页核心样式 */
.jd-pagination {
  display: flex;
  align-items: center;
}

/* 确保分页组件的所有元素都有足够的可见性 */
.jd-pagination .el-pagination__prev,
.jd-pagination .el-pagination__next,
.jd-pagination .el-pagination__page-btn {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
  min-width: 36px;
  height: 36px;
  line-height: 34px;
  margin: 0 2px;
  border-radius: 2px;
  transition: all 0.3s;
}

.jd-pagination .el-pagination__prev,
.jd-pagination .el-pagination__next {
  width: auto;
  padding: 0 10px;
}

.jd-pagination .el-pagination__prev:hover:not(.is-disabled),
.jd-pagination .el-pagination__next:hover:not(.is-disabled),
.jd-pagination .el-pagination__page-btn:hover:not(.is-disabled) {
  border-color: #e1251b !important;
  color: #e1251b !important;
  background-color: #fff0f0 !important;
}

.jd-pagination .el-pagination__prev.is-disabled,
.jd-pagination .el-pagination__next.is-disabled {
  border-color: #e0e0e0 !important;
  color: #e0e0e0 !important;
  background-color: #f5f5f5 !important;
  cursor: not-allowed;
}

.jd-pagination .el-pagination__page-btn:not(.is-disabled).is-active {
  background-color: #e1251b !important;
  border-color: #e1251b !important;
  color: #fff !important;
  font-weight: bold;
}

.jd-pagination .el-pagination__jump {
  margin-left: 10px;
  color: #666;
  font-size: 14px;
}

.jd-pagination .el-pagination__jump .el-input__inner {
  width: 60px;
  text-align: center;
  margin: 0 5px;
  border: 1px solid #ddd;
}

.page-size-selector {
  margin-left: 10px;
}

.page-size-selector .el-input__inner {
  border: 1px solid #ddd;
}

/* 学习提示样式 */
.learning-tips {
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 20px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
  display: inline-block;
}

.tips-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tip-card {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.tip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.tip-icon {
  font-size: 32px;
  margin-bottom: 15px;
}

.tip-card h4 {
  color: #333;
  margin-bottom: 10px;
  font-size: 16px;
}

.tip-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* 响应式调整 */
@media (min-width: 1200px) {
  .tips-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .tips-container {
    grid-template-columns: 1fr;
  }
}

/* 回到顶部按钮样式 */
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 99;
}

.back-to-top.show {
  opacity: 1;
}

.back-to-top:hover {
  background-color: #f5f7fa;
  transform: translateY(-3px);
}

.back-to-top .el-icon {
  font-size: 20px;
  color: #606266;
}

.back-to-top:hover .el-icon {
  color: #e1251b;
}

/* 页脚已移至可复用组件 FrontendFooter.vue */
</style>